<template>
  <div class="index">
    <el-container>
      <el-header>
        <h1>后台管理系统</h1>
        <el-button type="primary" size="default" @click="ato">退出</el-button>
      </el-header>
      <el-container>
        <el-aside width="auto">
          <Nav />
        </el-aside>
        <el-main>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="(item,index) in $route.matched" :key="index">{{item.name}}</el-breadcrumb-item>
          </el-breadcrumb>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Nav from "@/components/Nav.vue";
export default {
  components: { Nav },
  name: "Index",
  data() {
    return {};
  },
  methods: {
    ato() {
      this.$confirm("此操作将永久退出, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "退出成功!",
          });
          sessionStorage.clear();
          this.$router.push("/and");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出",
          });
        });
    },
  },
  mounted() {
    console.log(this.$route);
  },
  watch: {},

  beforeRouteEnter: (to, from, next) => {
    next(() => {
      if (sessionStorage.getItem("token")) {
        next();
      } else {
        alert("您未登录请先登录");
        next("/and");
      }
    });
  },
};
</script>

<style lang="scss">
.index {
  width: 100%;
  height: 100%;
  .el-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #373d41;
    > h1 {
      color: #fff;
    }
  }
  .el-container {
    height: 100%;
  }
  .el-main {
    background: #eaedf1;
    > :nth-child(2) {
      margin-top:14px ;
      background: #fff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      box-sizing: border-box;
      padding: 8px;
      border-radius: 5px;
    }
  }
}
</style>
